import 'package:flutter/material.dart';
import 'package:flutter_first_one/api/file.dart';
import 'package:flutter_first_one/custom_behavior/keep_alive_warpper.dart';

class StoryCard extends StatelessWidget {
  final Map<String, dynamic> item;
  const StoryCard({super.key, required this.item});

  @override
  Widget build(BuildContext context) {
    return Card(
        surfaceTintColor: const Color.fromRGBO(255, 255, 255, 1),
        shadowColor: const Color.fromRGBO(202, 69, 24, 0.35),
        clipBehavior: Clip.antiAlias,
        elevation: 5,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 封面
            AspectRatio(
                aspectRatio: 1,
                // 因为listview会再滚出列表会销毁优化性能，但这样图片会重新加载
                // 所以这里保持图片的状态，不然他销毁
                child: KeepAliveWrapper(
                  child: FadeInImage.assetNetwork(
                    placeholder: 'images/cd_head.png',
                    image: File.imageUrl(item['cover']),
                    imageErrorBuilder: (context, error, stackTrace) =>
                        Image.asset('images/cd_head.png'),
                    fit: BoxFit.cover,
                  ),
                )),
            // 底部信息
            SizedBox(
                height: 100,
                child: Padding(
                  padding: EdgeInsetsDirectional.all(10),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // 标题、标签
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(item['title'].toString()),
                          const Row(
                            children: [
                              Text(
                                '#信息',
                                style: TextStyle(
                                    color: Color.fromRGBO(177, 212, 40, 1),
                                    fontSize: 10),
                              ),
                              Text(
                                '#周期',
                                style: TextStyle(
                                    color: Color.fromRGBO(177, 212, 40, 1),
                                    fontSize: 10),
                              )
                            ],
                          )
                        ],
                      ),
                      // 故事信息
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  CircleAvatar(
                                    radius: 8,
                                    backgroundImage: NetworkImage(File.imageUrl(
                                        item['createAvatar'].toString())),
                                    onBackgroundImageError:
                                        (exception, stackTrace) =>
                                            Image.asset('images/cd_head.png'),
                                  ),
                                  const SizedBox(
                                    width: 5,
                                  ),
                                  Text(
                                    item['createName'] == ''
                                        ? '儿时故事'
                                        : item['createName'].toString(),
                                    style: TextStyle(fontSize: 10),
                                  )
                                ],
                              ),
                              Text(
                                item['createTime'].toString(),
                                style: TextStyle(fontSize: 10),
                              )
                            ],
                          ),
                          Column(
                            children: [
                              const SizedBox(
                                width: 14,
                                height: 14,
                                child: Image(
                                  image: AssetImage(
                                    'images/like_active.png',
                                  ),
                                  fit: BoxFit.contain,
                                ),
                              ),
                              Text(item['praiseNum'].toString())
                            ],
                          )
                        ],
                      )
                    ],
                  ),
                ))
          ],
        ));
  }
}
